<template>
  <div style="height:100vh;width:100%; background: rgb(233, 233, 233);">
    <div style="height:40vh;width:100%;background:white">
      <div>
        <input
          type="text"
          v-model="input_text"
          @keydown.enter="input_top"
          placeholder="回车搜索商品"
          class="input_top"
        />

        <div></div>
      </div>
      <br />
      <!-- //热门推荐 -->
      <div>
        <p style="padding-left:4%;font-size:14px">热门搜索</p>

        <div style="width:96%;margin-left:4%;height:10vh;">
          <div style="width:100% ;height:2vh"></div>
          <div v-for="(item, index) in input_rm" :key="index">
            <span
              @click="onclickrm(item)"
              style="padding:5px;font-size:12px;margin-top:2%;background:rgb(233, 233, 233);float:left;margin-right:5%"
            >{{item}}</span>
          </div>
          <div style="width:100% ;height:2vh"></div>
        </div>
      </div>
      <!-- 历史记录 -->
      <br />
      <div>
        <p style="padding-left:4%;font-size:14px">历史记录</p>

        <div style="width:96%;margin-left:4%;height:10vh;">
          <div style="width:100% ;height:2vh"></div>
          <div v-for="(item, index) in input_text_rm" :key="index">
            <span
              style="padding:5px;font-size:12px;margin-top:2%;background:rgb(233, 233, 233);float:left;margin-right:5%"
            >{{item}}</span>
          </div>
          <div style="width:100% ;height:2vh"></div>
        </div>
      </div>
      <div
        @click="button_back"
        style="font-size:40px;color:red;  margin-left:5%"
        class="el-icon-switch-button"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input_text: "",
      input_rm: [
        "衣服",
        "鞋",
        "感动女朋友",
        "玩具",
        "独乐乐",
        "帽子",
        "感动中国神器",
        "老八美食店",
      ],
      input_mm: [],
      input_text_rm: [],
    };
  },
  methods: {
    button_back() {
      this.$router.go(-1);
    },
    input_top() {
      if (this.input_text.length === 0) {
        return;
      }
      this.addHistory(this.input_text);
    },
    onclickrm(item) {
      this.addHistory(item);
    },
    addHistory(item) {
      var index = this.input_text_rm.findIndex((ele) => {
        return ele === item;
      });

      if (index !== -1) {
        this.input_text_rm.splice(index, 1);
      }

      this.input_text_rm.unshift(item);

      if (this.input_text_rm.length > 4) {
        this.input_text_rm.pop();
      }
    },
  },
};
</script>

<style scoped>
.input_top {
  height: 3.7vh;
  width: 70%;
  font-size: 12px;
  margin-left: 3%;
  border-radius: 20px;
  background: rgb(233, 233, 233);
  margin-top: 1vh;
  padding-left: 10px;
}
</style>
